<template>
  <view class="my-tab-bar">
    <view
      v-for="(item, idx) in tabList"
      :key="item.text"
      class="tab-item"
      :class="{ active: idx === currentTab }"
      @click="switchTab(idx)"
    >
      <image
        :src="currentTab === idx ? item.selectedIcon : item.icon"
        class="tab-icon"
      />
      <text>{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "CustomTabBar",
  props: {
    currentTab: { type: Number, required: true },
  },
  data() {
    return {
      tabList: [
        {
          text: "主页",
          page: "/pages/homeView/clientHome",
          icon: "/static/home.png",
          selectedIcon: "/static/home.png",
        },
        {
          text: "点餐",
          page: "/pages/clientMealPick/clientMealOrder",
          icon: "/static/category/order.png",
          selectedIcon: "/static/category/order.png",
        },
        {
          text: "我的餐表",
          page: "/pages/clientMealPick/clientMealPick", 
          icon: "/static/category/mealPick.png", 
          selectedIcon: "/static/category/mealPick.png", 
        },
        {
          text: "我的信息",
          page: "/pages/profile/profile",
          icon: "/static/user.png",
          selectedIcon: "/static/user.png",
        },
      ],
    };
  },
  methods: {
    switchTab(idx) {
      if (this.currentTab === idx) return;
      uni.reLaunch({ url: this.tabList[idx].page });
    },
  },
};
</script>

<style scoped>
.my-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 98rpx;
  display: flex;
  background: #fffbe6;
  border-top: 1rpx solid #eee;
  z-index: 999;
}
.tab-item {
  flex: 1;
  text-align: center;
  color: #b48709;
  font-size: 25rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 6rpx;
}
.tab-icon {
  width: 46rpx;
  height: 46rpx;
  margin-bottom: 4rpx;
}
.tab-item.active {
  color: #faad14;
  font-weight: bold;
}
</style>
